/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
async function setChannelsList() {
    const res = await axios({
        url: '/v1_0/channels'
    });
    document.querySelector('.form-select').innerHTML =
        '<option value="" selected disabled>请选择文章频道</option>'
        + res.data.channels.map(item => `<option value=${item.id}>${item.name}</option>`);
}

async function saveNewArticle() {
    const coverImg = document.querySelector('.rounded');
    const articleForm = document.querySelector('.art-form');
    const articleData = serialize(articleForm, { hash: true, empty: true });
    // console.log(articleData);
    delete articleData.id;
    articleData.cover = {
        type: coverImg.src ? 1 : 0, // 封面类型：单图模式
        images: [coverImg.src]
    };
    try {
        const res = await axios({
            url: '/v1_0/mp/articles',
            method: 'POST',
            data: articleData
        });
        // console.log(res);
        myAlert(true, '发布成功');
        // 清空表单
        articleForm.reset();
        // 清空封面
        coverImg.src = '';
        coverImg.classList.remove('show');
        document.querySelector('.place').classList.remove('hide');
        // 清空富文本编辑器
        editor.setHtml('');

        setTimeout(() => {
            location.href = '../content/index.html';
        }, 1500);
    } catch (error) {
        // console.log(error.response.data.message);
        myAlert(false, error.response.data.message);
    }
}

async function saveEditedArtcle() {
    const coverImg = document.querySelector('.rounded');
    const articleForm = document.querySelector('.art-form');
    const articleData = serialize(articleForm, { hash: true, empty: true });
    articleData.cover = {
        type: coverImg.src ? 1 : 0, // 封面类型：单图模式
        images: [coverImg.src]
    };
    console.log(articleData);
    try {
        const res = await axios({
            url: `/v1_0/mp/articles/${articleData.id}`,
            method: 'PUT',
            data: articleData
        });
        // console.log(res);
        myAlert(true, '修改成功');
        // 清空表单
        articleForm.reset();
        // 清空封面
        coverImg.src = '';
        coverImg.classList.remove('show');
        document.querySelector('.place').classList.remove('hide');
        // 清空富文本编辑器
        editor.setHtml('');

        setTimeout(() => {
            location.href = '../content/index.html';
        }, 1500);
    } catch (error) {
        // console.log(error.response.data.message);
        myAlert(false, error.response.data.message);
    }
}

/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector('.img-file').addEventListener('change', async e => {
    const imgFile = e.target.files[0];
    if (imgFile) {
        const fd = new FormData();
        fd.append('image', imgFile);
        const res = await axios({
            url: '/v1_0/upload',
            method: 'POST',
            data: fd
        });
        // console.log(res);
        document.querySelector('.rounded').src = res.data.url;
        document.querySelector('.place').classList.add('hide');
        document.querySelector('.rounded').classList.add('show');
    }
});
// 优化： 点击img标签可以重新切换封面
document.querySelector('.rounded').addEventListener('click', () => {
    document.querySelector('.img-file').click();
});

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send-btn').addEventListener('click', (e) => {
    // 判断是修改还是发布文章，并调用不同函数
    if (e.target.innerText !== '修改') {
        saveNewArticle();
    } else {
        saveEditedArtcle();
    }
});

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
(function () {
    // console.log(location.search);
    const paramsStr = location.search;
    const params = new URLSearchParams(paramsStr);
    // console.log(params);
    params.forEach(async (value, key) => {
        if (key === 'id') {
            document.querySelector('.title span').innerText = '修改文章';
            document.querySelector('.send-btn').innerText = '修改';
            const res = await axios({
                url: `/v1_0/mp/articles/${value}`
            });
            const dataObj = {
                channel_id: res.data.channel_id,
                title: res.data.title,
                rounded: res.data.cover.images[0],
                content: res.data.content,
                id: res.data.id
            }
            Object.keys(dataObj).forEach(key => {
                if (key === 'rounded') {
                    if (dataObj[key]) {
                        document.querySelector('.rounded').src = dataObj[key];
                        document.querySelector('.place').classList.add('hide');
                        document.querySelector('.rounded').classList.add('show');
                    }
                } else if (key === 'content') {
                    editor.setHtml(dataObj[key]);
                } else {
                    document.querySelector(`[name=${key}]`).value = dataObj[key];
                }
            })
        }
    })
})();

// 调用函数渲染频道列表
setChannelsList();